<!-- 订单管理 -->
<template>
  <div class="dashboard-container order-list customer-list-box">
    <div class="app-container">
      <el-card
        class="search-card-box"
        shadow="never"
      >
        <el-form
          ref="form"
          :model="searchFormData"
          label-width="90px"
        >
          <div class="filter-container">
            <el-row :gutter="40">
              <el-col :span="7">
                <el-form-item
                  label="订单编号:"
                  style="margin-bottom: 20px;"
                >
                  <el-input
                    v-model="searchFormData.id"
                    placeholder="请输入订单编号"
                    clearable
                    style="width: 230px"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item
                  label="订单状态:"
                  style="margin-bottom: 20px"
                >
                  <el-select
                    v-model="searchFormData.status"
                    clearable
                    placeholder="请选择订单状态"
                    style="width: 230px"
                  >
                    <el-option
                      v-for="item in statusOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item
                  label="付费状态:"
                  style="margin-bottom: 20px"
                >
                  <el-select
                    v-model="searchFormData.paymentStatus"
                    clearable
                    placeholder="请选择付费状态"
                    style="width: 230px"
                  >
                    <el-option
                      v-for="item in paymentStatusOptions"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item
                  label="发件人姓名:"
                  style="margin-bottom: 20px"
                >
                  <el-input
                    v-model="searchFormData.senderName"
                    placeholder="请输入发件人姓名"
                    clearable
                    style="width: 230px"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item
                  label="发件人电话:"
                  style="margin-bottom: 20px"
                >
                  <el-input
                    v-model="searchFormData.senderPhone"
                    placeholder="请输入发件人电话"
                    clearable
                    style="width: 230px"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item
                  label="发件人地址:"
                  style="margin-bottom: 20px"
                >
                  <el-select
                    v-model="searchFormData.senderProvinceId"
                    clearable
                    placeholder="请选择省"
                    style="width: 110px"
                    @change="senderProvinceIdChange"
                  >
                    <el-option
                      v-for="item in senderProvinceIdOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                  <el-select
                    v-model="searchFormData.senderCityId"
                    clearable
                    placeholder="请选择市"
                    style="width: 110px"
                    @change="senderCityIdIdChange"
                  >
                    <el-option
                      v-for="item in senderCityIdOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                  <el-select
                    v-model="searchFormData.senderCountyId"
                    clearable
                    placeholder="请选择区"
                    style="width: 110px"
                  >
                    <el-option
                      v-for="item in senderCountyIdOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item
                  label="收件人姓名:"
                  style="margin-bottom: 20px"
                >
                  <el-input
                    v-model="searchFormData.receiverName"
                    placeholder="请输入收件人姓名"
                    clearable
                    style="width: 230px"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item
                  label="收件人电话:"
                  style="margin-bottom: 20px"
                >
                  <el-input
                    v-model="searchFormData.receiverPhone"
                    placeholder="请输入收件人电话"
                    clearable
                    style="width: 230px"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item
                  label="收件人地址:"
                  style="margin-bottom: 20px"
                >
                  <el-select
                    v-model="searchFormData.receiverProvinceId"
                    clearable
                    placeholder="请选择省"
                    style="width: 110px"
                    @change="receiverProvinceIdChange"
                  >
                    <el-option
                      v-for="item in receiverProvinceIdOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                  <el-select
                    v-model="searchFormData.receiverCityId"
                    clearable
                    placeholder="请选择市"
                    style="width: 110px"
                    @change="receiverCityIdIdChange"
                  >
                    <el-option
                      v-for="item in receiverCityIdOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                  <el-select
                    v-model="searchFormData.receiverCountyId"
                    clearable
                    placeholder="请选择区"
                    style="width: 110px"
                  >
                    <el-option
                      v-for="item in receiverCountyIdOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-button
                  type="warning"
                  style="margin-left: 10px"
                  @click="search"
                >搜索</el-button>
                <el-button
                  class="reset-btn"
                  plain
                  @click="reset"
                >重置</el-button>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </el-card>
      <div
        v-loading="listLoading"
        :class="{ 'loading-box': listLoading }"
        element-loading-text="加载中"
        style="margin-top: 20px"
      >
        <el-card
          class="table-card-box"
          shadow="never"
        >
          <el-table
            :key="tableKey"
            ref="multipleTable"
            :data="dataList"
            fit
            style="width: 100%"
            stripe
            :header-cell-style="{ background: 'rgba(250,252,255,1)' }"
            @selection-change="handleSelectionChange"
          >
            <div
              v-show="
                (!dataList || dataList.length <= 0) &&
                  !listLoading &&
                  !searchkey
              "
              slot="empty"
            >
              <img
                src="@/icons/pic-kong.png"
                alt="img"
                style="margin-top: 20px; width: 20%; height: 20%"
              />
              <p style="margin-top: -20px; padding-bottom: 0px">这里空空如也</p>
            </div>
            <el-card
              v-show="
                (!dataList || dataList.length <= 0) && !listLoading && searchkey
              "
              slot="empty"
              class="table-empty-box"
              shadow="never"
            >
              <empty></empty>
            </el-card>
            <el-table-column
              align="left"
              type="index"
              label="序号"
              width="60"
            >
              <template slot-scope="scope">
                <span>{{
                  scope.$index +
                    (searchFormData.page - 1) *
                    searchFormData.pageSize +
                    1
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="订单编号"
              min-width="160px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.id }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="运单编号"
              min-width="130px"
            >
              <template slot-scope="scope">
                <span>{{
                  scope.row.transportOrder === null
                    ? ''
                    : scope.row.transportOrder.id
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="下单时间"
              min-width="160px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.createTime }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="订单状态"
              min-width="90px"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.status == ' 23000'">待取件</span>
                <span v-else-if="scope.row.status == '23001'">已取件</span>
                <span v-else-if="scope.row.status == '23002'">网点自寄</span>
                <span v-else-if="scope.row.status == '23003'">网点入库</span>
                <span v-else-if="scope.row.status == '23004'">待装车</span>
                <span v-else-if="scope.row.status == '23005'">运输中</span>
                <span v-else-if="scope.row.status == '23006'">网点出库</span>
                <span v-else-if="scope.row.status == '23007'">待派送</span>
                <span v-else-if="scope.row.status == '23008'">派送中</span>
                <span v-else-if="scope.row.status == '23009'">已签收</span>
                <span v-else-if="scope.row.status == '23010'">拒收</span>
                <span v-else>已取消</span>
              </template>
            </el-table-column>

            <el-table-column
              align="left"
              label="发件人姓名"
              min-width="100"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.senderName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="发件人电话"
              min-width="120"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.senderPhone }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="发件人地址"
              min-width="150px"
            >
              <template slot-scope="scope">
                <span>{{
                  scope.row.senderProvince === null
                    ? ''
                    : scope.row.senderProvince.name
                }}</span>
                <span>{{
                  scope.row.senderCity === null ? '' : scope.row.senderCity.name
                }}</span>
                <span>{{
                  scope.row.senderCounty === null
                    ? ''
                    : scope.row.senderCounty.name
                }}</span>
                <span>{{ scope.row.senderAddress }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="收件人姓名"
              min-width="100"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.receiverName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="收件人电话"
              min-width="120"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.receiverPhone }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="收件人地址"
              min-width="120"
            >
              <template slot-scope="scope">
                <span>{{
                  scope.row.receiverProvince === null
                    ? ''
                    : scope.row.receiverProvince.name
                }}</span>
                <span>{{
                  scope.row.receiverCity === null
                    ? ''
                    : scope.row.receiverCity.name
                }}</span>
                <span>{{
                  scope.row.receiverCounty === null
                    ? ''
                    : scope.row.receiverCounty.name
                }}</span>
                <span>{{ scope.row.receiverAddress }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="取件类型"
              min-width="100"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.pickupType == 1">网点自寄</span>
                <span v-else>上门取件</span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="付费类型"
              min-width="100"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.paymentMethod == 1">预结</span>
                <span v-else>到付</span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="付费状态"
              min-width="100"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.paymentStatus == 1">未付</span>
                <span v-else>已付</span>
              </template>
            </el-table-column>
            <!-- 操作按钮 -->
            <el-table-column
              align="center"
              label="操作"
              width="85"
              fixed="right"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-link
                  v-if="
                    scope.row.status == '23002' && scope.row.pickupType == 1
                  "
                  type="primary"
                  :underline="false"
                  @click="handleOrderDetail(scope.row.id, scope.row.pickupType)"
                >编辑详情</el-link>
                <el-link
                  v-else
                  type="primary"
                  :underline="false"
                  @click="
                    handleOrderDetail(
                      scope.row.id,
                      scope.row.status,
                      scope.row.pickupType,
                      scope.row.transportOrder === null
                        ? ''
                        : scope.row.transportOrder.id
                    )
                  "
                >查看详情</el-link>
              </template>
            </el-table-column>
          </el-table>
          <!-- end -->
          <!-- 分页 -->
          <div class="pagination">
            <div
              v-show="dataList && dataList.length > 0"
              class="pages"
            >
              <el-pagination
                :current-page="Number(searchFormData.page)"
                :total="Number(total)"
                :page-size="Number(searchFormData.pageSize)"
                :page-sizes="[10, 20, 30, 50]"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
          <!-- end -->
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
import { areaList } from '@/api/common'
import { orderList } from '@/api/order'
import options from '@/api/orderstatus.json'
export default {
  components: {
  },
  data() {
    return {
      searchFormData: {
        page: 1,
        pageSize: 10,
        id: null,
        status: null,
        paymentStatus: null,
        senderName: '',
        senderPhone: '',
        senderProvinceId: null,
        senderCityId: null,
        senderCountyId: null,
        receiverName: '',
        receiverPhone: '',
        receiverProvinceId: null,
        receiverCityId: null,
        receiverCountyId: null
      },
      statusOptions: [],
      paymentStatusOptions: [
        {
          value: 1,
          name: '未付'
        },
        {
          value: 2,
          name: '已付'
        }
      ],
      senderProvinceIdOptions: [],
      senderCityIdOptions: [],
      senderCountyIdOptions: [],
      receiverProvinceIdOptions: [],
      receiverCityIdOptions: [],
      receiverCountyIdOptions: [],
      orderId: '',
      multipleSelection: [],
      tableKey: 0,
      dataList: [],
      total: null,
      listLoading: true,
      searchkey: false
    }
  },
  created() {
    this.statusOptions = options // 订单状态
    this.getList()
    this.getAreaList()
    const _this = this

    // 键盘enter操作
    document.onkeydown = function(e) {
      const key = window.event.keyCode
      if (key === 13) {
        _this.search()
      }
    }
  },
  methods: {
    // 获取订单列表数据
    async getList() {
      this.listLoading = true
      // 查询
      const { data } = await orderList(this.searchFormData)
      this.listLoading = false
      // 获取数据给dataList
      this.dataList = data.items
      // 获取总条数
      this.total = data.counts
    },
    async getAreaList() {
      const { data } = await areaList({ parentId: 0 })
      this.senderProvinceIdOptions = data
      this.receiverProvinceIdOptions = data
    },
    async senderProvinceIdChange(val) {
      if (!val) {
        this.searchFormData.senderCityId = null
        this.searchFormData.senderCountyId = null
        this.senderCityIdOptions = []
        this.senderCountyIdOptions = []
      } else {
        const { data } = await areaList({ parentId: +val })
        this.senderCityIdOptions = data
      }
    },
    async senderCityIdIdChange(val) {
      if (!val) {
        this.searchFormData.senderCountyId = null
        this.senderCountyIdOptions = []
      } else {
        const { data } = await areaList({ parentId: +val })
        this.senderCountyIdOptions = data
      }
    },
    async receiverProvinceIdChange(val) {
      if (!val) {
        this.searchFormData.receiverCityId = null
        this.searchFormData.receiverCountyId = null
        this.receiverCityIdOptions = []
        this.receiverCountyIdOptions = []
      } else {
        const { data } = await areaList({ parentId: +val })
        this.receiverCityIdOptions = data
      }
    },
    async receiverCityIdIdChange(val) {
      if (!val) {
        this.searchFormData.receiverCountyId = null
        this.receiverCountyIdOptions = []
      } else {
        const { data } = await areaList({ parentId: +val })
        this.receiverCountyIdOptions = data
      }
    },
    search() {
      this.searchFormData.page = 1
      this.getList()
      this.searchkey = true
    },
    reset() {
      this.searchFormData.id = null
      this.searchFormData.status = null
      this.searchFormData.paymentStatus = null
      this.searchFormData.senderName = ''
      this.searchFormData.senderPhone = ''
      this.searchFormData.senderProvinceId = null
      this.searchFormData.senderCityId = null
      this.searchFormData.senderCountyId = null
      this.searchFormData.receiverName = ''
      this.searchFormData.receiverPhone = ''
      this.searchFormData.receiverProvinceId = null
      this.searchFormData.receiverCityId = null
      this.searchFormData.receiverCountyId = null
      this.searchkey = false
      this.getList()
    },
    // 数据变化时触发，赋予数据
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      this.searchFormData.pageSize = val
      if (this.searchFormData.page === 1) {
        this.getList(this.searchFormData)
      }
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.searchFormData.page = val
      this.getList()
    },
    // 订单详情
    handleOrderDetail(id, status, pickupType, transportOrderId) {
      // eslint-disable-next-line object-curly-spacing
      this.$router.push({
        path: '/business/edit-order',
        query: {
          orderId: id,
          status: status,
          pickUpType: pickupType,
          transportOrderId
        }
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 40px;
}

// 下拉框
::v-deep .el-select {
  width: 100%;
}
</style>

<style lang="scss" scoped>
.order-list ::v-deep .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}
</style>
